'use client'

import { FloatingPanel, List, Space, Switch } from 'antd-mobile';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

const data = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
]


const useStyleChange = () => {

  const handleThemeColorChange = (e: any) => {
    if (e.matches) {
      // 当主题颜色变化为暗色时执行的操作
      console.log('Dark theme is active');
      document.documentElement.setAttribute(
        'data-prefers-color-scheme',
        'dark'
      )
    } else {
      // 当主题颜色变化为亮色时执行的操作
      console.log('Light theme is active');
      document.documentElement.setAttribute(
        'data-prefers-color-scheme',
        'light'
      )
    }
  }
  const darkThemeQuery: any = window.matchMedia('(prefers-color-scheme: dark)');

  darkThemeQuery.addListener(handleThemeColorChange);

  // 页面加载时触发一次事件处理程序
  handleThemeColorChange(darkThemeQuery);

}


export default function Home() {

  const router = useRouter()
  let [anchors, setAnchors] = useState<any[]>([100, 400, 667, 844, 896])



  useEffect(() => {
    useStyleChange()
    setAnchors([100, window.innerHeight * 0.4, window.innerHeight * 1.0])
    console.log(window);

    router.push('/main')
  }, [])
  return (
    <main className="flex min-h-screen flex-col items-start justify-start p-0 w-full h-full ">
      <h1>Main page</h1>
      <h1>theme switcher test</h1>

      <FloatingPanel anchors={anchors}>
        <div className='float_inner w-full h-full '>
          asdasdsa
        </div>
      </FloatingPanel>
    </main>
  )
}


